<template>
  <div class="jnpf-content-wrapper">
    <div class="jnpf-content-wrapper-center">
      <div class="jnpf-content-wrapper-search-box" style="padding-bottom: 12px; display: flex">
        <div class="input-container">
          <label class="label" for="inputField">项目编号:</label>
          <a-input id="inputField" v-model:value="proNumber" placeholder="请输入" />
          <label class="label" for="inputField">项目名称:</label>
          <a-input id="inputField" v-model:value="proName" placeholder="请输入" />
        </div>
        <div class="button">
          <a-button type="primary" @click="reset">重置</a-button>
          <a-button style="margin-left: 10px" @click="init">查询</a-button>
        </div>
      </div>
      <div class="jnpf-content-wrapper-content">
        <div class="table-header">
          <span class="header-title">抽取项目列表</span>
          <a-button type="primary" :icon="h(PlusOutlined)" @click="showModal">新建</a-button>
        </div>
        <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 410 }">
          <template #bodyCell="{ column, text }">
            <template v-if="column.key === '5'">
              <span class="custom-cell">
                <span class="ycq-dot"></span>
                {{ text }}
              </span>
            </template>
            <template v-if="column.key === 'operation'">
              <div class="button-container">
                <a-button type="link" class="operation-button">查看</a-button>
                <a-button type="link" class="operation-button">编辑</a-button>
                <a-button type="link" class="operation-button">删除</a-button>
                <a-button type="link" class="operation-button">抽取</a-button>
                <a-button type="link" class="operation-button">上次抽取结果</a-button>
              </div>
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <!-- 新增弹窗 -->
    <a-modal v-model:visible="open" title="新增项目" centered :maskClosable="false" :keyboard="false" :width="600" @ok="handleOk">
      <a-form ref="formRef" :model="formSchemas" name="tree-node" :rules="rules" autocomplete="off" :label-col="{ style: { width: '120px' } }" :colon="false">
        <a-form-item label="项目编号" name="proNumber">
          <a-input v-model:value="formSchemas.proNumber" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="项目名称" name="proName">
          <a-input v-model:value="formSchemas.proName" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="评标时间" name="proTime">
          <a-date-picker show-time placeholder="请选择(xxxx-xx-xx xx:xx)" @change="onChange" @ok="onOk" />
        </a-form-item>
        <a-form-item label="代理机构" name="proOrg">
          <a-select
            v-model:value="formSchemas.proOrg"
            show-search
            placeholder="Select a person"
            :options="options"
            :filter-option="filterOption"
            @change="handleChange"></a-select>
        </a-form-item>
        <a-form-item label="评标地点" name="proAddress">
          <a-input v-model:value="formSchemas.proAddress" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, h, onMounted, toRefs, reactive } from 'vue';
  import { Modal as AModal, DatePicker as ADatePicker } from 'ant-design-vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import type { FormInstance } from 'ant-design-vue';
  // import dayjs from 'dayjs';
  // import { getList} from './helper/api';
  const options = ref([
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'tom', label: 'Tom' },
  ]);
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  const columns = [
    { title: '序号', width: 100, dataIndex: 'name', key: 'name', align: 'center' },
    { title: '项目编号', width: 100, dataIndex: 'age', key: 'age', align: 'center' },
    { title: '项目名称', dataIndex: 'address', key: '1', width: 150, align: 'center' },
    { title: '开标时间', dataIndex: 'address', key: '2', width: 150, align: 'center' },
    { title: '评标时间', dataIndex: 'address', key: '3', width: 150, align: 'center' },
    { title: '评标地点', dataIndex: 'address', key: '4', width: 150, align: 'center' },
    { title: '状态', dataIndex: 'address', key: '5', width: 150, align: 'center' },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 150,
    },
  ];

  interface DataItem {
    key: number;
    name: string;
    age: number;
    address: string;
  }

  const data: DataItem[] = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      name: `Edrward ${i}`,
      age: 32,
      address: `London Park no. ${i}`,
    });
  }
  interface State {
    formSchemas: any; //新增弹窗表单
  }
  // 新增弹窗校验
  const rules = {
    proNumber: [{ required: true, message: '必填' }],
    proName: [{ required: true, message: '必填' }],
    proTime: [{ required: true, message: '必填' }],
    proOrg: [{ required: true, message: '必填' }],
    proAddress: [{ required: true, message: '必填' }],
  };
  const proNumber = ref<string>(''); //项目编号
  const proName = ref<string>(''); //项目名称
  const open = ref<boolean>(false); //新增弹窗
  const formRef = ref<FormInstance>(); //新增弹窗dom
  const state = reactive<State>({
    formSchemas: {
      proNumber: '', //项目编号
      proName: '', //项目名称
      proTime: '', //评标时间
      proOrg: '', //评标组织
      proAddress: '', //评选地点
    },
  });
  const { formSchemas } = toRefs(state);
  onMounted(() => {
    init();
  });
  // 初始化数据
  const init = () => {
    console.log('init');
  };
  //重置数据
  const reset = () => {
    proNumber.value = '';
    proName.value = '';
    init();
  };
  // 新增弹窗
  const showModal = () => {
    open.value = true;
  };
  //确认弹窗
  const handleOk = async () => {
    try {
      const values = await formRef.value?.validate();
      if (values) {
        open.value = false;
      }
    } catch (_) {}
  };
  // 时间选择
  const onChange = (value, dateString) => {
    console.log('Selected Time: ', value, dateString);
    state.formSchemas.proTime = value;
  };
  // 选中时间事件
  const onOk = value => {
    state.formSchemas.proTime = value;
  };
</script>
<style lang="less">
  .input-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 标签和输入框之间的间距 */
  }

  .label {
    width: 170px; /* 设置标签宽度 */
    margin-right: 0px; /* 标签与输入框之间的间距 */
  }
  a-input {
    flex: 1; /* 使输入框在容器中尽可能扩展 */
    margin: 0 5px; /* 输入框左右的间距 */
  }
  .button {
    position: absolute;
    right: 10px;
  }
  .button-container {
    display: flex;
    flex-wrap: wrap; /* 允许按钮换行 */
    justify-content: flex-start; /* 按钮对齐方式，根据需要可以调整 */
  }

  .operation-button {
    white-space: nowrap; /* 防止按钮文本换行 */
  }
  .ant-table-tbody > tr > td {
    padding: 0;
  }
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
    padding: 10px 10px 0px 10px; /* Space between header and table */
  }

  .header-title {
    font-weight: bold;
    font-size: 18px; /* Adjust font size as needed */
  }
  .custom-cell {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dcq-dot {
    width: 4px;
    height: 4px;
    background-color: #ff8d23; /* Change the color as needed */
    border-radius: 50%;
    margin-right: 8px;
  }
  .ycq-dot {
    width: 4px;
    height: 4px;
    background-color: #52c41a; /* Change the color as needed */
    border-radius: 50%;
    margin-right: 8px;
  }
  .ant-form-item {
    padding: 10px 30px 0px 20px !important;
  }
</style>
